<template>
  <div>
    <input ref="touxiang" type="file" @change="changeFile">
    <img ref="img" src="" alt="">
    <!-- 上传组件 el-upload默认选择文件之后就会立即上传，而且不依赖于你项目的任何请求 -->
    <!-- action 上传地址 -->
    <!-- name 上传文件的字段 -->
    <!-- on-success可以获取到上传成功之后服务器端响应的内容 -->
    <el-upload
      action="http://124.223.14.236:8060/admin/common/upload?type=images"
      name="file"
      list-type="picture-card"
      :headers="{ 'x-token': tokenStr }"
      :on-success="onSuccess"
    >
      <i class="el-icon-plus" />
    </el-upload>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tokenStr:
        'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyaW5mbyI6eyJpZCI6IjEiLCJsb2dpbl9uYW1lIjoiYWRtaW4iLCJwYXNzd29yZCI6Ijk2ZTc5MjE4OTY1ZWI3MmM5MmE1NDlkZDVhMzMwMTEyIiwibmFtZSI6IlRoaW5rSlPkuIDlk6UiLCJlbWFpbCI6Imhld3UxMTIyQDE2My5jb20iLCJwaG9uZSI6IjE3MzQyMDY1OTA5IiwibG9naW5faXAiOiI6OjEiLCJsb2dpbl9kYXRlIjoiMjAxOC0wMS0wOCAxNjoyMjo1MSIsImNyZWF0ZV9kYXRlIjoiMjAxNy0xMi0xNCAxMTo1Mjo0NiIsInVwZGF0ZV9kYXRlIjoiMjAyMS0wOS0wOCAxOTo0MzowMyIsImRlbF9mbGFnIjoiMCIsInJvbGVfaWQiOlsiMWM1NGUwMDNjMWZjNGRjZDliMDg3ZWY4ZDQ4YWJhYzMiXSwic3RhdHVzIjoxLCJkZWZhdWx0X2RhdGEiOiIxIiwicm9sZW5hbWUiOlsi6LaF57qn566h55CG5ZGYIl19LCJpYXQiOjE2NzY3OTQyNzN9.DZR48aFUTd8ogrcEjOrw-0XMtyxFbQYR21udRbkXGNk'
    }
  },
  methods: {
    changeFile() {
      console.log(this.$refs.touxiang) // 上传DOM控件
      console.log(this.$refs.touxiang.files) // 上传DOM控件
      const url = URL.createObjectURL(this.$refs.touxiang.files[0])
      this.$refs.img.src = url
    },
    onSuccess(result) {
      console.log(result)
      console.log(result.data.savePath)
    }
  }
}
</script>

<style lang="scss" scoped></style>
